<template>
  <div class="currency">
    <div class="content">
      <div class="left">
        <div class="head">
          <p>MCU</p>
          <ul class="head-btn">
            <li :class="record.categoryId ? 'btn isBtnActive':'btn'" @click="goElectric">通用MCU</li>
            <li class="btn" @click="goElectric">电机SOC</li>
          </ul>
        </div>
        <div class="screen-box">
          <div class="screen">
            <p class="filter-tit">快速筛选</p>
            <el-dropdown :hide-on-click="false" trigger="click">
              <span class="el-dropdown-link" ref="dropdownName">
                自定义筛选项
                <i class="el-icon-arrow-down el-icon--right"></i>
              </span>
              <el-dropdown-menu slot="dropdown" ref="dropdown">
                <el-row v-if="propertiesBox.length > 0">
                  <el-col
                    :span="24"
                    v-for="val in propertiesBox"
                    :key="val.propertyId"
                  >
                    <el-dropdown-item>
                      <el-checkbox-group v-model="val.active">
                        <el-checkbox>
                          {{ val.propertyName }}
                        </el-checkbox>
                      </el-checkbox-group>
                    </el-dropdown-item>
                  </el-col>
                </el-row>
                <el-button
                  type="primary"
                  size="small"
                  class="sure"
                  @click="SureEdit()"
                  >确认</el-button
                >
              </el-dropdown-menu>
            </el-dropdown>
          </div>
          <!-- 动态左边 -->
          <div class="custom" v-if="propertiesLeft.length > 0">
            <div
              class="custom-list"
              v-for="(item, index) in propertiesLeft"
              :key="item.propertyId"
            >
              <div :class="item.propLeftType ? 'show' : 'hidden'">
                <el-tooltip class="item" :content="item.propertyName" placement="bottom" effect="light">
                  <p class="brand-tit">{{ item.propertyName }}:</p>
                </el-tooltip>
                <ul class="brand-list" :ref="`propLeftTypeRef${index}`">
                  <li v-for="(val, key) in item.valueText" :key="key">
                    <span
                      :class="{ active: val.active }"
                      @click="handlepropLeftFilter(key, index, item)"
                    >
                      {{ val.text }}</span
                    >
                  </li>
                </ul>
                <p
                  class="unfold"
                  v-show="propLeftHieight[item.model] > 40"
                  @click="getpropLeftMore(item, index)"
                >
                  {{ item.propLeftType ? "收起" : "更多" }}
                  <i
                    :class="
                      item.propLeftType
                        ? 'el-icon-arrow-up'
                        : 'el-icon-arrow-down'
                    "
                  ></i>
                </p>
              </div>
            </div>
          </div>
          <!-- 过滤数据 -->
          <div class="filter-box">
            <div v-if="filter.length > 0" class="filter-content">
              <p>已筛选：</p>
              <div class="tag-box">
                <el-tag
                  v-for="(item, index) in filter"
                  :key="index"
                  closable
                  @close="handleClose(item)"
                  type="info"
                >
                  {{
                    item.combinationName
                      ? item.combinationName
                      : item[0].combinationName
                  }}
                </el-tag>
              </div>
              <p class="reset" @click="getReset">重置</p>
            </div>
            <p v-else>您还未设置筛选内容哦~</p>
          </div>
        </div>
        <div class="filter-table" v-if="tableData.length > 0">
          <el-table
            ref="myTable"
            :data="tableData"
            style="width: 100%"
            height="600"
            :header-cell-style="{
              padding: '10px 0',
              'font-size': '12px',
              'text-align': 'left',    
              'color': '#191A24',
            }"
          >
            <el-table-column fixed width="240" prop="partNumber">
              <template slot="header" slot-scope="scope" class="header-left">
                <el-badge
                  :value="productId.length + ''"
                  class="item"
                  :hidden="isHidden"
                >
                  <el-button
                    :type="productId.length >= 2 ? 'danger' : 'info'"
                    @click="handlerContrast"
                    >对比</el-button
                  >
                </el-badge>
                <el-select v-model="modelInput" filterable placeholder="请输入型号" :filter-method="filterMethod" class="model-select" :loading="loading" @change="changeValue">
                  <el-option
                    v-for="item in partNumSearch"
                    :key="item.id"
                    :label="item.partNumberInfo"
                    :value="item.id">
                  </el-option>
                  <div v-if="partNumSearch.length ==20" class="more-box" @click="getMore()">
                    <img class="more-icon" src="@/assets/img/more.png" alt=""/>
                    <p>查看更多</p>
                  </div>
                </el-select>
              </template>
              <template slot-scope="scope">
                <el-checkbox
                  v-model="scope.row.isChecked"
                  @change="toggleCheck(scope.row)"
                  >{{ scope.row.partNumber }}</el-checkbox >
              </template>
            </el-table-column>
            <el-table-column
              prop="brandName"
              label="品牌"
              width="100"
              align="center"
            >
            </el-table-column>
            <el-table-column
              prop="packages"
              label="封装"
              width="100"
              align="center"
            >
            </el-table-column>
            <el-table-column
              prop="packings"
              label="包装"
              width="100"
              align="center"
            >
            </el-table-column>
            <el-table-column prop="mpq" label="MPQ" width="100" align="center">
            </el-table-column>
            <el-table-column
              prop="mmoq"
              label="最小起定量"
              width="100"
              align="center"
            >
            </el-table-column>
            <el-table-column
              prop="image"
              label="图片"
              width="100"
              align="center"

            >
              <template slot-scope="scope">
                <img
                  v-if="scope.row.image"
                  class="list-pic"
                  :src="scope.row.image"
                  alt=""
                />
                <p v-else>—</p>
              </template>
            </el-table-column>
            <el-table-column
              prop="properties"
              width="100"
              align="center"
              v-for="(item, index) in headerProperties"
              :key="index"
            >
              <template slot="header">
                {{ item.propertyName}}
              </template>
              <template slot-scope="scope">
                <div v-if="scope.row[item.propertyId]">
                  {{scope.row[item.propertyId].text}}
                </div>
              </template>
            </el-table-column>
            <el-table-column
              prop="manufacturer"
              label="制造商"
              width="200"
              align="center"
            >
            </el-table-column>
            <el-table-column
              prop="industryID"
              label="所属行业"
              width="240"
              align="center"
            >
            </el-table-column>
            <el-table-column
              prop="description"
              label="描述"
              width="250"
              align="center"
            >
            </el-table-column>
          </el-table>
          <!-- 分页 -->
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="record.pageIndex"
            :page-sizes="[8, 16, 24, 32]"
            :page-size="record.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
          >
          </el-pagination>
        </div>
      </div>
      <!-- 动态右边 -->
      <div class="right">
        <p class="params-fitler">参数筛选</p>
        <el-menu v-if="propertiesRight.length > 0" :collapse-transition="true">
          <el-submenu
            :index="index + ''"
            v-for="(item, index) in propertiesRight"
            :key="index"
          >
            <template slot="title">
              <i class="el-icon-set-up"></i>
              <span>{{ item.propertyName }}</span>
            </template>
            <el-menu-item>
              <el-input
                v-model="propertiesInput[item.model].name"
                placeholder="请输入内容"
                suffix-icon="el-icon-search"
              >
              </el-input>
            </el-menu-item>
            <el-menu-item-group>
              <el-menu-item v-for="(val, key) in item.valueText" :key="key">
                <el-checkbox-group
                  v-model="val.active"
                  @change="handlerPropRight(key, index, val)"
                >
                  <el-checkbox :label="val">
                    {{ val.text }}
                  </el-checkbox>
                </el-checkbox-group>
              </el-menu-item>
            </el-menu-item-group>
          </el-submenu>
        </el-menu>
      </div>
    </div>
    <!-- 抽屉 -->
    <el-dialog class="compare" :title="dialogTitle" :visible.sync="drawer" :direction="direction" size="60%" v-if="drawList.length > 0">
      <el-table :data="drawList" style="width: 100%"  height="400" :header-cell-style="{
              padding: '10px 0',
              'font-size': '12px',
              'text-align': 'left',    
              'color': '#191A24', 
              'background': 'rgba(0,0,0,0.06)',
            }">
        <el-table-column prop="partNumber" width="180" fixed="left">
          <template slot="header" slot-scope="socpe">
            <el-checkbox v-model="isCheck">隐藏相同项</el-checkbox>
          </template>
          <template slot-scope="scope">
            <div class="parnumbox">
              <img class="icon" src="./../../../assets/img/del.png" alt="" @click="delParnumber(scope.$index,scope.row)"/>
              <p>{{ scope.row.partNumber }}</p> 
            </div>
          </template>
        </el-table-column>
        <el-table-column
          label="品牌"
          prop="brandName"
          min-width="100"
          align="center"
          v-if="isShow1"
        >
          <template slot-scope="scope">
            <div>{{scope.row.brandName}}</div>
          </template>
        </el-table-column>
        <el-table-column
          prop="packages"
          label="封装"
          min-width="100"
          align="center"
          v-if="isShow2"
        >
          <template slot-scope="scope">
            <div>{{scope.row.packages}}</div>
          </template>
        </el-table-column>
        <el-table-column
          prop="packings"
          label="包装"
          min-width="100"
          align="center"
          v-if="isShow3"
        >
          <template slot-scope="scope">
            <div>{{scope.row.packings}}</div>
          </template>
        </el-table-column>
        <el-table-column prop="mpq" label="MPQ" min-width="140" align="center" v-if="isShow4">
          <template slot-scope="scope">
            <div>{{scope.row.mpq}}</div>
          </template>
        </el-table-column>
        <el-table-column
          prop="mmoq"
          label="最小起定量"
          min-width="100"
          align="center"
          v-if="isShow5"
        >
          <template slot-scope="scope">
            <div>{{scope.row.mmoq}}</div>
          </template>
        </el-table-column>
        <el-table-column prop="image" label="图片" min-width="140" align="center" v-if="isShow6">
          <template slot-scope="scope">
            <img
              v-if="scope.row.image"
              class="list-pic"
              :src="scope.row.image"
              alt=""
            />
            <p v-else>—</p>
          </template>
        </el-table-column>
        <!-- 动态渲染 -->
         <el-table-column
          prop="properties"
          width="100"
          align="center"
          v-for="(item, index) in headerProperties"
          :key="index"
          v-if="drawShow[item.propertyId]"
        >
          <template slot="header" >
            {{ item.propertyName}}
          </template>
          <template slot-scope="scope">
            <div v-if="scope.row[item.propertyId]">
              {{scope.row[item.propertyId].text}}
            </div>
          </template>
        </el-table-column>
        <el-table-column
          prop="manufacturer"
          label="制造商"
          min-width="200"
          align="center"
          v-if="isShow7"
        >
          <template slot-scope="scope">
            <div>{{scope.row.manufacturer}}</div>
          </template>
        </el-table-column>
        <el-table-column
          prop="industryID"
          label="所属行业"
          min-width="240"
          align="center"
          v-if="isShow8"
        >
          <template slot-scope="scope">
            <div>{{scope.row.industryID}}</div>
          </template>
        </el-table-column>
        <el-table-column
          prop="description"
          label="描述"
          align="center"
          min-width="400"
          v-if="isShow9"
        >
          <template slot-scope="scope">
            <div>{{scope.row.description}}</div>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>

<script>
import { querypartNumber} from "@/api/index.js";
// import Drawer from '@/components/drawer'
import { getList, getFastSelectProperties, getContrast,gettableHeader,getParamSelectProperties,getSelectProperties} from "@/api/model";

export default {
  name:"currency",
  components:{
    // Drawer
  },
  data() {
    return {
      loading: false,
      partNumSearch: [],
      modelInput: '',
      inputVal:'',
      brands: [],
      brandbox:[],
      propertiesBox: [],
      propertiesTitle:[],
      propertiesLeft: [],
      propLeftHieight: {},
      propertiesRight: [],
      propertiesInputbox:[],
      brand: [],
      brandType: false,
      packagesType: false,
      packagesHieight: 0,
      brandHieight: 0,
      packing: [],
      packingType: false,
      packingHieight: 0,
      tempBrandArr: [],
      tempPackageArr: [],
      tempPackingArr: [],
      systemIds: [], //用户自定义筛选
      customHieight: {},
      allArr: [[]],
      PropLeftArr: [[]],
      filterPropLeftName: [[]],
      filterCustomName: [[]],
      customArr: [],
      coustom: [
        //自定义筛选项
        {
          id: 301,
          name: "华大",
          model: 0,
          child: [
            {
              id: 309,
              name: "松翰",
            },
            {
              id: 310,
              name: "健天",
            },
            {
              id: 311,
              name: "复旦微",
            },
            {
              id: 312,
              name: "辉芒微",
            },
            {
              id: 313,
              name: "东软载波",
            },
            {
              id: 339,
              name: "松翰",
            },
            {
              id: 330,
              name: "健天",
            },
            {
              id: 331,
              name: "复旦微",
            },
            {
              id: 332,
              name: "辉芒微",
            },
            {
              id: 333,
              name: "东软载波",
            },
            {
              id: 409,
              name: "松翰",
            },
            {
              id: 410,
              name: "健天",
            },
            {
              id: 3411,
              name: "复旦微",
            },
            {
              id: 3412,
              name: "辉芒微",
            },
            {
              id: 3143,
              name: "东软载波",
            },
          ],
        },
        {
          id: 302,
          name: "Microchip",
          model: 1,
          child: [
            {
              id: 4311,
              name: "复旦微",
            },
            {
              id: 4312,
              name: "辉芒微",
            },
            {
              id: 4313,
              name: "东软载波",
            },
            {
              id: 4339,
              name: "松翰",
            },
            {
              id: 4330,
              name: "健天",
            },
            {
              id: 4331,
              name: "复旦微",
            },
            {
              id: 4332,
              name: "辉芒微",
            },
            {
              id: 3343,
              name: "东软载波",
            },
          ],
        },
      ],
      interfaceDate: {},
      InterfaceArr: [[]],
      allInterfaceDate: [[]],
      allInterfaceArr: [[]],
      featuresDate: {}, //其他特性
      allFeaturesDate: [[]],
      allFeaturesArr: [[]],
      allFeaturesObj: {},
      filter: [], //过滤数据
      packages: [], //封装数据
      propertiesInput: [],
      record: {
        brandId: [],
        categoryId: "",
        packages: [],
        packings: [],
        properties: [],
        partNumber: "",
        pageIndex: 1,
        pageSize: 8,
      },
      total: 0,
      headerProperties:[],
      tableProperties: [],
      tableData: [],
      dynamicColumns:[],
      productId: [],
      drawer: false,
      direction: "btt",
      drawList: [],
      drawIndex:{},
      drawShow:{},
      isHidden: true,
      isCheck: false,
      isShow1:true,
      isShow2:true,
      isShow3:true,
      isShow4:true,
      isShow5:true,
      isShow6:true,
      isShow7:true,
      isShow8:true,
      isShow9:true,
      dialogTitle:"",
    };
  },
  methods: {
    // 跳转路由
    goElectric() {
      // this.$router.push("/electric");
    },
    goWireless() {
      // this.$router.push("/wireless");
    },
    // 当前路由id
    selectModel(val) {
      this.record.categoryId = val.path.slice(8);
      // console.log(this.record.categoryId,'sss');
      let params = {
        categoryId: this.record.categoryId,
      };
      gettableHeader(this.record.categoryId).then(res=>{
        if(res.code == 200){
          this.headerProperties  = res.result;
          this.headerProperties.map(item=>{
            this.$set(this.drawIndex,item.propertyId,[]);
            this.$set(this.drawShow,item.propertyId,true)
          })
        }
      })
      getFastSelectProperties(params).then((res) => {
        if (res.code == 200) {
          this.propertiesBox = res.result.properties;
          this.propertiesBox.map((item, i) => {
            this.$set(item, "active", false);
            this.$set(item, "model", i);
            this.$set(item, "propLeftType", false);
            this.$set(this.featuresDate, item.model, []);
            item.valueText = item.valueText.map((val) => {
              return { text: val };
            });
            item.valueText.map((val) => {
              this.$set(val, "active", false);
              this.$set(val, "propertyID", item.propertyId);
            });
          });
          let arrleft = this.propertiesBox.shift();
          this.propertiesLeft.push(arrleft);
          this.propertiesLeft.map(val=>{
            val.active=true;
          });
        }
      });
      getParamSelectProperties(params).then(res=>{
        if (res.code == 200) {
          this.propertiesRight = res.result.properties;
          this.propertiesRight.map((item, i) => {
            this.$set(item, "active", false);
            this.$set(item, "model", i);
            this.$set(this.interfaceDate, item.model, []);
            this.$set(this.propertiesInput, item.model, {});
            this.$set(this.propertiesInput[item.model], "id", item.propertyId);
            this.$set(this.propertiesInput[item.model], "name", "");
            item.valueText = item.valueText.map((val) => {
              return { text: val,active:false, propertyID:item.propertyId};
            });
          });
          console.log(this.propertiesRight,'数组');
        }
      })
    },
    //右侧输入
    handleproInput(val){
      val.map(item=>{
        if(item.name != ''){
          let params = {
            "context": item.name,
            "propertyId": item.id,
          }
          getSelectProperties(params).then(res=>{
            console.log(res,'接口');
            if(res.code == 200){
              this.propertiesInputbox = res.result;
              this.propertiesInputbox = this.propertiesInputbox.map(num=>{
                return { text: num,active:false, propertyID:item.id};
              })
              this.propertiesRight.map(arr=>{
                if(arr.propertyId == item.id){
                  arr.valueText = this.propertiesInputbox;
                }
              })
            }
          })
        }
      })
     
    },
    // 点击过滤
    handleSiftingSort(index, active, field) {
      let tempArr = this[field];
      let tempArr1 = []; //品牌过滤的数组
      let combinationVal = []; //选中的数组
      tempArr.forEach((item, arrIndex) => {
        if (index === arrIndex) {
          item.active = !active;
        }
        if (item.active) {
          combinationVal.push(item);
        }
      });
      let filterbrandId = []; //选中的id
      let filterbrandName = []; //选中的name
      combinationVal.map((val) => {
        filterbrandId.push(val.brandId);
        filterbrandName.push(val.brandName);
      });
      console.log(combinationVal, "11111");
      this.record.brandId = filterbrandId;
      if (filterbrandName.length > 0) {
        tempArr1.push({
          combinationName:
            tempArr[0].subject + "：" + filterbrandName.join("/"),
          ...combinationVal,
        });
      }
      this.tempBrandArr = tempArr1;
      this.filter = [
        // ...this.tempBrandArr,
        // ...this.tempPackageArr,
        // ...this.tempPackingArr,
        ...this.filterPropLeftName,
        // ...this.customArr,
        ...this.allInterfaceDate,
      ];
      this.filter = this.filter.filter((item) => {
        return item.length != 0;
      });
      this.$forceUpdate(this.filter);
    },
    handlePackageSort(index, active, field) {
      let tempArr = this[field];
      let tempArr2 = []; //封装过滤的数组
      let combinationVal = []; //选中的数组
      tempArr.forEach((item, arrIndex) => {
        if (index === arrIndex) {
          item.active = !active;
        }
        if (item.active) {
          combinationVal.push(item);
        }
      });
      let filterpackageName = []; //选中的name
      combinationVal.map((val) => {
        console.log(val, "4444");
        filterpackageName.push(val.packageName);
      });
      console.log(combinationVal, "11111");
      this.record.packages = filterpackageName;
      // console.log(filterbrandName.length);
      if (filterpackageName.length > 0) {
        tempArr2.push({
          combinationName:
            tempArr[0].subject + "：" + filterpackageName.join("/"),
          ...combinationVal,
        });
      }
      this.tempPackageArr = tempArr2;
      console.log(this.tempPackageArr);
      this.filter = [
        ...this.tempBrandArr,
        ...this.tempPackageArr,
        ...this.tempPackingArr,
        ...this.filterPropLeftName,
        // ...this.customArr,
        ...this.allInterfaceDate,
      ];
      this.filter = this.filter.filter((item) => {
        return item.length != 0;
      });
      this.$forceUpdate(this.filter);
    },
    handlePackingSort(index, active, field) {
      let tempArr = this[field];
      let tempArr3 = []; //封装过滤的数组
      let combinationVal = []; //选中的数组
      tempArr.forEach((item, arrIndex) => {
        if (index === arrIndex) {
          item.active = !active;
        }
        if (item.active) {
          combinationVal.push(item);
        }
      });
      let filterpackingName = []; //选中的name
      combinationVal.map((val) => {
        console.log(val, "4444");
        filterpackingName.push(val.packingName);
      });
      console.log(combinationVal, "11111");
      this.record.packings = filterpackingName;
      // console.log(filterbrandName.length);
      if (filterpackingName.length > 0) {
        tempArr3.push({
          combinationName:
            tempArr[0].subject + "：" + filterpackingName.join("/"),
          ...combinationVal,
        });
      }
      this.tempPackingArr = tempArr3;
      console.log(this.tempPackingArr);
      this.filter = [
        ...this.tempBrandArr,
        ...this.tempPackageArr,
        ...this.tempPackingArr,
        ...this.filterPropLeftName,
        // ...this.customArr,
        ...this.allInterfaceDate,
      ];
      this.filter = this.filter.filter((item) => {
        return item.length != 0;
      });
      this.$forceUpdate(this.filter);
    },
    // 标签删除
    handleClose(item) {
      console.log(item, "111111111111111111");
      let filterId = [];
      this.filter.map((val, i) => {
        if (Array.isArray(val)) {
          // 自定义筛选项
          if (val[0].combinationName == item[0].combinationName) {
            val.map((obj) => {
              console.log(obj);
              let arr = Object.values(obj);
              arr.map((temp) => {
                if (temp.active) {
                  temp.active = !temp.active;
                  filterId.push(temp.id);
                }
              });
            });
            this.filter.splice(i, 1);
          }
        } else {
          // 固定标签
          if (val.combinationName == item.combinationName) {
            let arr = Object.values(val);
            arr.map((val) => {
              if (val.active) {
                val.active = !val.active;
                filterId.push(val.id);
              }
            });
            this.filter.splice(i, 1);
          }
        }
      });
      // 自定义选项
      // this.record.filterCustom.map((arr, i) => {
      //   if (arr.toString() == filterId.toString()) {
      //     this.record.filterCustom.splice(i, 1);
      //   }
      // });
      // 品牌id
      this.record.brandId.map((brandId) => {
        filterId.map((id) => {
          if (brandId == id) {
            this.record.brandId = [];
          }
        });
      });
    },
    // 重置
    getReset() {
      this.filter = [];
      this.record.properties.map((item) => {
        item.active = !item.active;
      });
      this.record.properties = [];
      this.tempBrandArr.map((item) => {
        for (var i in item) {
          if (item[i].active) {
            item[i].active = !item[i].active;
          }
        }
      });
      this.record.brandId = [];
      this.tempPackageArr.map((item) => {
        for (var i in item) {
          if (item[i].active) {
            item[i].active = !item[i].active;
          }
        }
      });
      this.record.packages = [];
      this.tempPackingArr.map((item) => {
        for (var i in item) {
          if (item[i].active) {
            item[i].active = !item[i].active;
          }
        }
      });
      this.record.packings = [];
    },
    // 自定义筛选项
    SureEdit() {
      let arrbox = [];
      this.propertiesBox.map(function (item) {
        if (item.active === true) {
          arrbox.push(item)
        }
      });
      this.propertiesLeft = this.propertiesLeft.concat(arrbox);
      this.propertiesLeft = [...new Set(this.propertiesLeft)]; 
      this.propertiesLeft = this.propertiesLeft.filter(val=>val.active===true);
      this.$refs.dropdown.showPopper = !this.$refs.dropdown.showPopper;
    },
    // 动态左边筛选
    handlepropLeftFilter(key, index, item) {
      console.log(key, index, item);
      this.allArr[index] = [];
      let tempArr = [item];
      this.PropLeftArr[index] = [];
      this.allFeaturesDate[index] = [];
      this.filterPropLeftName[index] = [];
      let arr = [];
      let PropLeftName = [];
      tempArr.map((val) => {
        val.valueText.map((content, arrIndex) => {
          if (key === arrIndex) {
            content.active = !content.active;
          }
          if (content.active) {
            this.$set(content, "subject", item.propertyName);
            arr.push(content);
          }
        });
      });
      this.allArr[index] = this.allArr[index].concat(arr);
      this.allFeaturesArr = this.allArr.filter((item) => {
        return item != null && item != 0;
      });
      this.allFeaturesObj = [].concat.apply([], this.allFeaturesArr);
      this.allArr[index].map((val) => {
        PropLeftName.push(val.text);
      });
      this.allFeaturesDate[index] = PropLeftName;
      if (this.allFeaturesDate[index].length > 0) {
        this.PropLeftArr[index].push({
          combinationName:
            this.allArr[index][0].subject +
            "：" +
            this.allFeaturesDate[index].join("/"),
          ...this.allArr[index],
        });
      }
      this.filterPropLeftName = this.PropLeftArr.filter((item) => {
        return item != null && item != 0;
      });
      this.record.properties = [...this.allFeaturesObj, ...this.InterfaceArr];
      this.record.properties = this.record.properties.filter((item) => {
        return item != null && item != 0;
      });
      this.filter = [
        ...this.tempBrandArr,
        ...this.tempPackageArr,
        ...this.tempPackingArr,
        ...this.filterPropLeftName,
        ...this.customArr,
        ...this.allInterfaceDate,
      ];
      this.filter = this.filter.filter((item) => {
        return item.length != 0 && item != undefined;
      });
      this.$forceUpdate(this.filter);
    },
    // 左边动态
    getpropLeftMore(item, index) {
      item.propLeftType = !item.propLeftType;
    },
    // 自定义筛选点击更多
    getMore(item, index) {
      console.log(item, index);
      item.customType = !item.customType;
      console.log(item.customType);
    },
    // 动态右边
    handlerPropRight(key, index, item) {
      console.log(key, index, item,'数据');
      this.allInterfaceDate[index] = [];
      this.allInterfaceArr[index] = [];
      let packageName = [];
      let findItem = "";
      let tempArr = [];
      this.propertiesRight.map((val, i) => {
        if (index == i) {
          this.interfaceDate[val.model].push(item);
          this.interfaceDate[val.model] = this.interfaceDate[val.model].filter((obj) => {
              return obj.active != false;
            }
          );
          this.interfaceDate[val.model].map((item) => {
            packageName.push(item.text);
            findItem = this.propertiesRight.find((itemSub) =>
              itemSub.valueText.some(
                (itemThirdSub) => itemThirdSub.text === item.text
              )
            );
          });

          if (packageName.length > 0) {
            tempArr.push({
              combinationName:
                findItem.propertyName + "：" + packageName.join("/"),...this.interfaceDate[val.model],
            });
          }
        }
      });
      console.log(this.interfaceDate, "1112222222");
      this.InterfaceArr = Object.values(this.interfaceDate).filter((item) => {
        return item != null && item != 0;
      });
      this.InterfaceArr = [].concat.apply([], this.InterfaceArr);
      this.allInterfaceArr[index] = this.allInterfaceArr[index].concat(tempArr);
      this.allInterfaceDate = this.allInterfaceArr.filter((item) => {
        return item != null && item != 0;
      });
      this.allFeaturesObj = [].concat.apply([], this.allFeaturesArr);
      this.record.properties = [...this.allFeaturesObj, ...this.InterfaceArr];
      this.record.properties = this.record.properties.filter((item) => {
        return item != null && item != 0;
      });
      this.filter = [
        ...this.tempBrandArr,
        ...this.tempPackageArr,
        ...this.tempPackingArr,
        ...this.filterPropLeftName,
        ...this.customArr,
        ...this.allInterfaceDate,
      ];
      this.filter = this.filter.filter((item) => {
        return item.length != 0;
      });
      this.$forceUpdate(this.filter);
    },
    // 监听参数获取产品列表
    handleList(val) {
      getList(val).then((res) => {
        console.log(res, "22222");
        if (res.code == 200) {
          this.tableData = res.result.list;
          this.tableData = this.tableData.map((item) => {
            this.$set(item, "isChecked", false);
            let arr = item.properties
            arr.forEach(val => {
              item[val.propertyID] = {} // 将日期做 key 挂载在 tableData 列表外层
              item[val.propertyID].text = val.text;
            })
            return item
          });
          console.log(this.tableData,'3333')
          this.total = res.result.total;
        }
      });
    },
    // 多选框点击
    toggleCheck(row) {
      this.productId.push(row);
      this.productId = Array.from(new Set(this.productId));
      console.log(this.productId,'xuanz');
      this.productId.map((item,index)=>{
        console.log(item.isChecked,index);
        if(item.isChecked === false){
          this.productId.splice(index,1)
        }
      })
      if (this.productId.length >= 2) {
        this.isHidden = false;
      }
    },
    // 弹窗
    handlerContrast() {
      if (this.productId.length >= 2) {
        this.drawer = true;
        this.drawList = this.productId;
        this.dialogTitle = '对比器件(' + this.drawList.length + ')';
        if(this.drawList.length >= 1){
          this.drawList = this.drawList.map(item=>{
            let arr = item.properties
            arr.forEach(val => {
              item[val.propertyID] = {} // 将propertyID做 key 挂载在 tableData 列表外层
              item[val.propertyID].text = val.text;
            })
            return item
          })
        }
      } else {
        this.$message("请选择两个或两个以上进行对比");
        this.drawer = false;
      }
    },
    // 删除行
    delParnumber(index,row){
      this.drawList.splice(index, 1)
    },
    // 表格搜索
    filterMethod(val){
      this.inputVal = val;
        if(this.inputVal){
          this.loading = true;
          let params={
            "partNumber": this.inputVal,
            "type":0,
          }
          querypartNumber(params).then(res=>{
            if(res.code == 200){
              this.loading = false;
              this.partNumSearch = res.result;
            }
          })
        }
    },
    changeValue(val){
      // console.log(val);
      if(val){
        this.$router.push({path:'/search',query:{partNum:val}})
        }
    },
    // 点击查看更多
    getMore(){
      if(this.inputVal){
          let params={
            "partNumber": this.inputVal,
            "type":1,
          }
          querypartNumber(params).then(res=>{
            console.log(res,'quan');
            if(res.code == 200){
              this.partNumSearch = res.result;
            }
          })
        }
    },
    // 隐藏相同项
    handleHidden(val){
      console.log(val,'状态');
      if(val){
        let arr = [];
        let arr1 = [];
        let arr2 = [];
        let arr3 = [];
        let arr4 = [];
        let arr5 = [];
        let arr6 = [];
        let arr7 = [];
        let arr8 = [];
        let arr9 = [];
        this.drawList.map((item,index)=>{
          arr.push(item.brandName);
          arr1.push(item.packages);
          arr2.push(item.packings);
          arr3.push(item.mpq);
          arr4.push(item.mmoq);
          arr5.push(item.image);
          arr6.push(item.manufacturer);
          arr7.push(item.industryID);
          arr8.push(item.description);
          this.headerProperties.map((val,key)=>{
            if(item[val.propertyId] == item[val.propertyId]){
              this.drawIndex[val.propertyId].push(item[val.propertyId]);
            }
          })
        })
        this.headerProperties.map((val,key)=>{
            this.drawIndex[val.propertyId]=[...new Set(this.drawIndex[val.propertyId])]
            if(this.drawIndex[val.propertyId].length == 1){
              this.drawShow[val.propertyId] = false;
            }else{
              const map = new Map()
              this.drawIndex[val.propertyId] = this.drawIndex[val.propertyId].filter(num=>!map.has(num.text) && map.set(num.text, num.text))
              if(this.drawIndex[val.propertyId].length ==1){
                this.drawShow[val.propertyId] = false;
              }
            }
        })
        console.log(this.drawShow,'000000000');
        let brandArr = [...new Set(arr)]
        let packagesArr = [...new Set(arr1)]
        let packingsArr = [...new Set(arr2)]
        let mpqArr = [...new Set(arr3)]
        let mmoqArr = [...new Set(arr4)]
        let imageArr = [...new Set(arr5)]
        let manufacturerArr = [...new Set(arr6)]
        let industryArr = [...new Set(arr7)]
        let descriptionArr = [...new Set(arr8)]
        console.log(packagesArr,'2222')
        if(brandArr.length == 1){
          this.isShow1 = false;
        }else{
          this.isShow1 = true;
        }
        if(packagesArr.length == 1){
          this.isShow2 = false;
        }else{
          this.isShow2 = true;
        }
        if(packingsArr.length == 1){
          this.isShow3 = false;
        }else{
          this.isShow3 = true;
        }
         if( mpqArr.length == 1){
          this.isShow4 = false;
        }else{
          this.isShow4 = true;
        }
        if(mmoqArr.length == 1){
          this.isShow5 = false;
        }else{
          this.isShow5 = true;
        }
        if(imageArr.length == 1){
          this.isShow6 = false;
        }else{
          this.isShow6 = true;
        }
         if(manufacturerArr.length == 1){
          this.isShow7 = false;
        }else{
          this.isShow7 = true;
        }
        if(industryArr.length == 1){
          this.isShow8 = false;
        }else{
          this.isShow8 = true;
        }
        if(descriptionArr.length == 1){
          this.isShow9 = false;
        }else{
          this.isShow9 = true;
        }
      }else{
        this.isShow1 = true;
        this.isShow2 = true;
        this.isShow3 = true;
        this.isShow4 = true;
        this.isShow5 = true;
        this.isShow6 = true;
        this.isShow7 = true;
        this.isShow8 = true;
        this.isShow9 = true;
        this.headerProperties.map(val=>{
          this.drawShow[val.propertyId] = true;
        })
        console.log(this.drawShow,'状态');
      }
    },
    // 分页
    handleSizeChange(size) {
      this.record.pageSize = size;
      console.log(this.record.pageSize);
    },
    handleCurrentChange(currentPage) {
      this.record.pageIndex = currentPage;
      console.log(this.record.pageIndex);
    },
  },
  created() {
    // this.handlerBrand();
    
  },
  watch: {
    $route: {
      handler(val) {
        this.selectModel(val);
      },
      immediate: true,
      deep: true,
    },
    propertiesInput:{
      handler(newVal, oldVal){
        // console.log(newVal);
        this.handleproInput(newVal);
      },
      deep:true, 
    },
    // brands: function () {
    //   this.$nextTick(function () {
    //     let cur = this.$refs["brandTypeRef"];
    //     if (cur) {
    //       this.brandHieight = cur.scrollHeight;
    //     }
    //   });
    // },
    // packages: function () {
    //   this.$nextTick(function () {
    //     let cur = this.$refs["packagesTypeRef"];
    //     if (cur) {
    //       this.packagesHieight = cur.scrollHeight;
    //     }
    //   });
    // },
    // packing: function () {
    //   this.$nextTick(function () {
    //     let cur = this.$refs["packingTypeRef"];
    //     if (cur) {
    //       this.packingHieight = cur.scrollHeight;
    //       // console.log(this.packingHieight, "22222");
    //     }
    //   });
    // },
    propertiesLeft: {
      handler(newVal, oldVal) {
        let that = this;
        that.$nextTick(function () {
          newVal.map((item, i) => {
            let cur = that.$refs[`propLeftTypeRef${i}`][0];
            if (cur) {
              that.$set(that.propLeftHieight, item.model, item.model);
              that.propLeftHieight[item.model] = cur.scrollHeight;
            }
          });
        });
      },
      immediate: true,
      deep: true,
    },
    coustom: {
      handler(newVal, oldVal) {
        let that = this;
        // that.$nextTick(function () {
        //   newVal.map((item, i) => {
        //     let cur = that.$refs[`customTypeRef${i}`][0];
        //     if (cur) {
        //       that.$set(that.customHieight, item.model, item.model);
        //       that.customHieight[item.model] = cur.scrollHeight;
        //     }
        //   });
        // });
      },
      immediate: true,
      deep: true,
    },
    record: {
      handler(val) {
        // console.log(val, "33333");
        this.handleList(val);
        // this.handlewatchPCBlist(val);
      },
      immediate: true,
      deep: true,
    },
    isCheck:{
      handler(val,oldVal){
        // console.log(val,'555')
        this.handleHidden(val);
      },
      // immediate:true,
      deep:true,
    },
  },
  updated(){
    this.$nextTick(() => {
      if (this.$refs.myTable && this.$refs.myTable.doLayout) {
        this.$refs.myTable.doLayout();
      }
    })
  },
  mounted() {
  },
};
</script>

<style lang="less" scoped>
@import "./../../../assets/style/edit.css";
.currency {
  width: 73.6%;
  margin: 10px auto 50px;
  .head {
    width: 100%;
    margin-bottom: 10px;
    background: #fff;
    p{
      font-size: 16px;
      font-weight: 600;
      color: #191A24;
      line-height: 22px;
      padding: 15px 0 9px 20px;
      border-bottom: 1px solid #EEEEEE;
    }
    .head-btn {
      padding: 10px 20px 20px;
      display: flex;
      .btn {
        font-size: 14px;
        font-weight: 400;
        color: #191A24;
        line-height: 20px;
        padding: 7px 15px;
        border: 1px solid #CCCCCC;
        border-radius: 2px;
        margin-right: 20px;
        &:last-child{
          margin-right: 0;
        }
      }
      .isBtnActive{
        color: #FFFFFF;
        background: #4370F3;
        border: 1px solid #4370F3;
      }
    }
  }
  .content {
    width: 100%;
    height: 100%;
    display: flex;
    // padding: 3px 0 0;
    // background: #fff;
    justify-content: space-between;
    .left {
      width: 77.5%;
      cursor: pointer;
      .screen-box{
        background: #fff;
      }
      .screen {
        padding: 15px 20px;
        display: flex;
        align-items: flex-end;
        justify-content: space-between;
        border-bottom: 1px solid #EEEEEE;
        .filter-tit{
          font-size: 16px;
          font-weight: 400;
          color: #191A24;
          line-height: 22px;
        }
        .el-dropdown {
          border: 1px solid #000;
          border-radius: 5px;
          padding: 6px;
          font-size: 14px;
          font-weight: 400;
          color: #191A24;
          line-height: 20px;
        }
      }
      .brand-tit {
        line-height: 40px;
        background: #F6F6F6;
        width: 17%;
        padding: 0 0 0 20px;
        // white-space: nowrap;//禁止换行
        // text-overflow: ellipsis;//..
        border-bottom: 1px solid #EEEEEE;
      }
      .brandheight {
        height: 300px;
        overflow-y: scroll;
      }
      .brand-list {
        display: flex;
        flex-wrap: wrap;
        font-size: 14px;
        font-weight: 400;
        color: #666666;
        line-height: 20px;
        width: 85%;
        justify-content: flex-start;
        li {
          line-height: 40px;
          span {
            padding: 0 18px 0;
          }
          .active {
            padding: 5px 10px;
            margin: 0 7px 0;
            border: 1px solid #f00;
            border-radius: 22px;
            color: #f00;
          }
        }
      }
      .unfold {
        font-size: 14px;
        color: #66b1ff;
        cursor: pointer;
        font-style: normal;
        vertical-align: middle;
        display: inline-block;
        height: 40px;
        line-height: 40px;
      }
      .filter-box {
        padding: 20px;
        font-size: 12px;
        .filter-content {
          display: flex;
          flex-wrap: wrap;
          align-items: center;
          p {
            color: #86909c;
          }
          .reset {
            color: #66b1ff;
          }
          .tag-box {
            width: 92%;
          }
          .el-tag {
            border-radius: 18px;
            color: #000;
            font-size: 12px;
            margin-right: 20px;
          }
        }
      }
      .filter-table {
        background: #fff;
        margin-top: 20px;
        .list-pic {
          width: 40px;
          // height: 100%;
          display: block;
        }
        .item {
          margin-right: 8px;
        }
      }
    }
    .right {
      width: 21.1%;
      background: #fff;
      .params-fitler{
        font-size: 16px;
        font-weight: 600;
        color: #191A24;
        line-height: 22px;
        padding: 15px 0 10px 20px;
        border-bottom: 1px solid #EEEEEE;;
      }
      h3 {
        margin: 20px 0 20px 20px;
      }
      .el-submenu {
        border-bottom: 1px solid #EEEEEE;
        .el-menu-item {
          padding: 10px;
          padding-left: 10px !important;
          line-height: 25px !important;
          .el-input__inner {
            height: 33px;
          }
        }
        .el-menu-item-group {
          .el-menu-item {
            width: 50%;
            min-width: 0;
            height: 40px;
            line-height: 6px;
            padding-left: 10px !important;
          }
        }
      }
    }
  }
}
  .parnumbox{
    display: flex;
    .icon{
      width: 16px;
      height: 16px;
      display: block;
      margin-right: 3px;
    }
  }
  .list-pic {
    width: 40px;
    // height: 100%;
    display: block;
  }
  .more-box{
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 14px;
    font-weight: 400;
    color: #4370F3;
    line-height: 30px;
    cursor: pointer;
    .more-icon{
      width: 16px;
      height: 16px;
      display: block;
    }
  }
.el-dropdown-menu {
  width: 15%;
}
.sure {
  margin: auto;
  display: block;
}
.el-divider {
  margin: 10px 0;
  background: 0 0;
  border-top: 1px dashed #000;
}
.show {
  height: auto;
  width: 100%;
  display: flex;
  border-bottom: 1px solid #EEEEEE;
  // padding: 0 30px;
  // line-height: 40px;
  // text-align: center;
}
.el-pagination {
  padding: 20px 5px;
  text-align: right;
}
.hidden {
  height: 40px;
  overflow: hidden;
  width: 100%;
  display: flex;
  border-bottom: 1px solid #EEEEEE;
  .brand-tit{
    overflow: hidden;//溢出隐藏
    white-space: nowrap;//禁止换行
    text-overflow: ellipsis;//...
  }
  // padding: 0 30px;
  // line-height: 40px;
  // text-align: center;
}
</style>